<template>
	<view >
		<uni-nav-bar left-icon="left"    :statusBar="true" titleSize="30px" leftText="返回"  right-text="提交" @clickRight="submit"   :title="this.formData.id?'修改问题':'新增问题'"  @clickLeft="back"   :fixed="true" backgroundColor="#3286ed" color="#fff"/>
		<!-- 输入框 -->
		<view>
			<u--form class="form" labelPosition="left" labelWidth="120px" :model="formData" ref="form">
				<u-form-item @click="tradeshow=true" label="厂商" prop="modelName" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="formData.modelName" border="none" placeholder="厂商"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item @click="Typeshow=true"  label="产品" prop="machineType" borderBottom ref="item1"  >
					<u--input  :readonly="true" v-model="formData.machineType" border="none" placeholder="产品"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item  v-if="this.formData.machineType" @click="modelshow=true" label="型号" prop="model" borderBottom ref="item1"  >
					<u--input :readonly="true" v-model="formData.model" border="none" placeholder="型号"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item  label="故障代码" prop="faultCodes" borderBottom ref="item1"  >
					<u--input  v-model="formData.faultCodes" border="none" placeholder="故障代码"></u--input>
				</u-form-item>
				<u-form-item  label="维修内容" prop="repairContent" borderBottom ref="item1"  >
					<u--textarea  v-model="formData.repairContent" border="none" placeholder="维修内容"></u--textarea>
				</u-form-item>
				<u-form-item  label="机器正面照" prop="frontPhoto" borderBottom ref="item1"  >
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							 name="1"
							 multiple
							:maxCount="10"
						></u-upload>
				</u-form-item>
				<u-form-item  label="机器屏幕照片" prop="screenPhotos" borderBottom ref="item1"  >
				<u-upload
						:fileList="fileList2"
						@afterRead="afterRead"
						@delete="deletePic"
						 name="2"
						 multiple
						:maxCount="10"
					></u-upload>
				</u-form-item>
				<u-form-item  label="机器主板照片" prop="motherboardPhoto" borderBottom ref="item1"  >
					<u-upload
							:fileList="fileList3"
							@afterRead="afterRead"
							@delete="deletePic"
							 name="3"
							 multiple
							:maxCount="10"
						></u-upload>
				</u-form-item>
			 </u--form>
			
			
		</view>
	<u-picker @cancel="tradeshow=false" :show="tradeshow" :columns="tradeList" keyName="dictLabel" @confirm="confirm"></u-picker>
	<u-picker @cancel="Typeshow=false" :show="Typeshow" :columns="modelTtype" keyName="productName" @confirm="confirmType"></u-picker>
	<u-picker @cancel="modelshow=false" :show="modelshow" :columns="modelList" keyName="model" @confirm="confirmModel"></u-picker>
	 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {addQuestion,getQusttionInfo,editQuestionApi} from '@/api/question.js'
import { login } from '../../api/login'
import { getToken } from '@/utils/auth.js'
 import {getDicts} from '@/api/dictionary/index.js'
 import {listProduct} from '@/api/product/product.js'

	export default {
		data(){
			return{
				headers: {
				    Authorization: "Bearer " + getToken(),
				},
				URL:'',
				fileList1:[],
				fileList2:[],
				fileList3:[],
				value:'',
				formData:{
					repairContent:'',
					frontPhoto:'',
					screenPhotos:'',
					motherboardPhoto:'',
					modelNames:'',
					modelName:''
				},
				tradeshow:false,
				tradeList:[],//厂商
				Typeshow:false,
				modelTtype:[],
				modelshow:false,
				modelList:[],//型号
				
				 
			}
		},
		onLoad(e){
			console.log(e);
			if(JSON.stringify(e)!=='{}'){
				this.getInfo(e)
			}
			console.log(this.$store.getters);
			this.URL=this.$store.getters.url
		},
		created() {
		 this.getTradeList()
		 this.getmodelList()
		 
		},
		methods:{
			//有Id
			async  getInfo(e){
				let res= await getQusttionInfo(e.id)  
				this.formData=res.data
				var frontPhoto="http://101.132.141.5:8081"+res.data.frontPhoto
				var screenPhotos="http://101.132.141.5:8081"+res.data.screenPhotos
				var motherboardPhoto="http://101.132.141.5:8081"+res.data.motherboardPhoto
				this.fileList1.push({url:frontPhoto})
				this.fileList2.push({url:screenPhotos})
				this.fileList3.push({url:motherboardPhoto})
			 },
			async submit(){
				 if(this.formData.id){
					 await editQuestionApi(this.formData)
					 this.$refs.uToast.show({
					 	type:'success',
					 	message:'修改成功'
					 })
				 }else{
					 await addQuestion(this.formData)
					 this.$refs.uToast.show({
					 	type:'success',
					 	message:'添加成功'
					 })
				 }
				
			},
			
			// 新增图片
		async afterRead(event,name) {
			console.log(event);
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			console.log(lists);
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url,event)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url,event) {
			 console.log(url);
			return new Promise((resolve, reject) => {
				 
				let a = uni.uploadFile({
					url:'http://101.132.141.5:8081/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					 header: this.headers,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						 if(event.name=='1'){
							 this.formData.frontPhoto=JSON.parse(res.data).fileName
						 }else if(event.name=='2'){
							 this.formData.screenPhotos=JSON.parse(res.data).fileName
						 }else if(event.name=='3'){
							 this.formData.motherboardPhoto=JSON.parse(res.data).fileName
						 }
					    setTimeout(() => {
					        resolve(res.data.data)
					    }, 1000)
					}
				});
			})
		},
		deletePic(event){
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1)
		},
		async getTradeList(){
			let res=await getDicts("trade")
			this.tradeList.push(res.data)
		
		},	
		confirm(e){
			this.formData.modelName=e.value[0].dictLabel
			this.tradeshow=false
		},
		confirmType(e){
			this.formData.machineType=e.value[0].productName
			this.Typeshow=false
			this.getmodelLists()
		},
		async getmodelList(){
			let res=await listProduct()
			this.modelTtype.push(res.rows)
		},
		async getmodelLists(){
			let res= await listProduct({productName:this.formData.machineType})
			this.modelList.push(res.rows[0].models)
		},
		confirmModel(e){
			this.formData.model=e.value[0].model
			this.modelshow=false
		},
		back(){
			uni.navigateBack({delta:1})
		},
		
		}
	}
</script>

<style lang="scss" scoped>
.navbar_left{
	display: flex;
}
.navbar_left view{
	font-size: 13px;
}
.form{
	background-color: #fff;
	padding-left: 10px;
}
</style>